<template>
  <el-collapse
    class="course-items"
    v-model="activeNames"
    :class="{ 'is-active-collapse': activeNames.length }"
    @change="handleChange"
  >
    <el-collapse-item name="1">
      <template #title>
        <div class="title-item">
          <img
            class="cover"
            src="@/assets/image/login-left-bg.png"
            alt=""
            srcset=""
          />
          <div class="info">
            <div class="header">
              <span class="course-type">{{
                item.category === 1 ? '公开课' : '正课'
              }}</span>
              <span class="title">{{ item.name }}</span>
            </div>
            <span class="row-desc">讲师：{{ item.teacherName }}</span>
            <span class="row-desc">课时：{{ item.courseNumber }}</span>
            <span class="row-desc">
              状态：<span :style="{ color: colors[item.status] }">{{
                status[item.status]
              }}</span></span
            >
          </div>
        </div>
      </template>

      <div class="">
        <courseTree :list="item.courseTreeVO" />
      </div>
    </el-collapse-item>
  </el-collapse>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import courseTree from '@/components/courseTree.vue'
import { courseItem } from '@/views/student/types'
interface Props {
  item: courseItem
}
const props = defineProps<Props>()
const activeNames = ref<string[]>([])
const handleChange = (val: string[]) => {
  console.log(val, activeNames.value)
}

const colors = {
  1: '#7dcb57',
  2: '#49a2ff',
  3: '#999ba1'
}

const status = {
  1: '未开始',
  2: '进行中',
  3: '已结束'
}
</script>

<style scoped lang="scss">
.course-items {
  margin-bottom: 20px;
  :deep(.el-collapse-item) {
    .el-collapse-item__header {
      height: auto;
      padding: 14px;
      border-radius: 10px;
    }
  }

  :deep(.el-collapse-item__wrap) {
    border-radius: 0 0 10px 10px;
  }

  .title-item {
    display: flex;
    align-items: center;
    .info {
      display: flex;
      flex-direction: column;
      .header {
        display: flex;
        align-items: center;

        .course-type {
          padding: 4px 8px;
          border-radius: 4px;
          background-color: #de443a;
          color: #fff;
          line-height: initial;
        }

        .title {
          font-size: 22px;
          margin-left: 16px;
        }
      }

      .row-desc {
        font-size: 18px;
        color: #6c6c6c;
        line-height: 30px;
        text-align: left;
      }
    }
    .cover {
      width: 260px;
      height: 140px;
      border-radius: 20px;
      overflow: hidden;
      margin-right: 20px;
    }
  }
}

.is-active-collapse {
  :deep(.el-collapse-item) {
    .el-collapse-item__header {
      border-radius: 10px 10px 0 0;
    }
  }
}
</style>
